<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="application/javascript" src="../js/vue.js"></script>

    <style>

    </style>
</head>
<body>

<!--
条件渲染:
    v-if:适用于频率较低的场景,不展示的dom直接被移除;结构不能被打断;
    v-show:适用于频率较高的场景,隐藏的dom不会被移除,仅仅是切换了元素的css;结构可以被打断;
-->
<div id="app12">

    <!--使用v-show做条件渲染:频率高用这个-->
    <h1 v-show="isShow">我叫{{name}}</h1>

    <!--使用v-if做条件渲染:频率低用这个-->
    <h1 v-if="isShow">我叫{{name}}</h1>

    <hr/>
<!--  v-else-if和v-else  -->
    <p>当前n的值为:{{n}}</p>
    <button @click="n++">点击+1</button>
    <div v-if="n===1">我是一号种子</div>
    <div v-else-if="n===2">我是二号种子</div>
    <div v-else-if="n===3">我是三号种子</div>
    <div v-else>我是废物</div>
    <hr/>

    <!--template不影响结构,只能配合v-if使用-->
    <template v-if="n===1">
        <div>我是张三</div>
        <div>来自北京</div>
        <div>喜欢唱跳rap</div>
    </template>
</div>

<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#app12",
        // 变量数据
        data: {
            name: "张三",
            isShow: true,
            n: 0
        },
        // 方法
        methods: {},
        // 计算属性
        computed: {},
        // 监听属性
        watch: {},
    })
</script>
</body>
</html>
